  <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>群星网约车</title>
  <!--这里引入页面的样式-->
  <style>
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 20px;
		/* 			background-color:gainsboro; */
	}
	.logo-title {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
	}
	.logo {
		height: 50px;
	}

	.title {
		font-size: 24px;
		font-weight: bold;
	}

	.links {
		display: flex;
		align-items: center;
	}

	.links el-link {
		margin-left: 10px;
	}

	.user-info {
		display: flex;
		align-items: center;
	}

	.avatar {
		margin-right: 10px;
	}

	.username a {
		color: #333;
		text-decoration: none;
	}
	.avatar-container {
	  position: relative;
	  display: inline-block;
	}

	.avatar-uploader {
	  display: inline-block;
	  cursor: pointer;
	  position: relative;
	  overflow: hidden;
	  border: 1px solid #eee;
	  border-radius: 50%;
	  width: 80px;
	  height: 80px;
	}

	.avatar {
	  width: 100%;
	  height: 100%;
	  object-fit: cover;
	}

	.avatar-uploader-icon {
	  font-size: 24px;
	  color: #8c939d;
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	}
	/* 移动端样式 */
	@media (max-width: 768px) {
		.header {
			flex-direction: column;
			align-items: flex-start;
		}

		.links {
			width: 100%;
			justify-content: space-around;
			position: fixed;
			bottom: 0;
			background-color: white;
			padding: 10px 0;
			box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
			z-index: 1000;
			margin-bottom: 10px;
			margin-left: -25px;
		}

		.links el-link {
			margin-left: 0;
		}

		.user-info {
			margin-top: 10px;
			width: 100%;
			justify-content: space-between;
		}
		.logo-title {
			display: flex;
			align-items: center;
			width: 100%;
			justify-content: center;
		}

		.logo {
			height: 40px;
		}

		.title {
			font-size: 20px;
		}
	}
  </style>
</head>
<!--引入相关的文件-->
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/axios-0.18.0.js"></script>
<body>
<div id="app">
	<div class="header">
		<div class="logo-title">
			<img class="logo" src="../image/carMR.png">
			<span class="title">群星网约车欢迎您</span>
		</div>
		<div class="links">
			<el-link href="userMain.html" target="_self" :underline="false">主页&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-link>
			<el-link href="orderUserInfo.html" target="_self" :underline="false">我的订单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-link>
			<el-link href="preferential.html" target="_blank" :underline="false">群星优惠&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-link>
			<el-link href="taxiInfo.html" target="_blank" :underline="false">群星简介&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-link>
			<el-link href="userInfo.html" target="_self" :underline="false">个人中心&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-link>
		</div>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<div class="user-info">
			<div>
				<el-avatar :src="avatar"></el-avatar>
			</div>
			&nbsp;&nbsp;&nbsp;&nbsp;
			<span v-if="!isEditing" class="username">
        <a id="uname" href="javascript:void(0)" @click="isEditing = true">{{ displayUsername }}</a>
      </span>
			<input v-else v-model="displayUsername" @blur="isEditing = false" @keyup.enter="isEditing = false" />
			&nbsp;&nbsp;&nbsp;&nbsp;
			<el-link target="_blank" :underline="false" @click="exitInfo">退出系统</el-link>
			&nbsp;&nbsp;&nbsp;&nbsp;
		</div>
	</div>
	  <el-container>
	        <el-header>个人中心</el-header>
	        <el-main>
	          <el-row :gutter="20">
	            <el-col :span="12">
	              <el-card>
	                <div slot="header" class="clearfix">
	                  <span>个人信息</span>
	                </div>
	                <el-avatar :size="80" :src="avatar"></el-avatar>
	                <p>用户名：{{userName}}</p>
	                <p>邮箱：{{email}}</p>
	                <p>电话：{{originalPhone}}</p>
				    <p>注册时间：{{day}}</p>
	              </el-card>
	            </el-col>
	            <el-col :span="12">
				  <el-card>
					<div slot="header" class="clearfix">
					  <span>账户设置</span>
					</div>
					<el-row :gutter="20">
					  <el-col :span="12">
						<div class="avatar-container">
						  <el-upload
							class="avatar-uploader"
							action="/user/users/common/upload"
							:show-file-list="false"
							:before-upload="beforeAvatarUpload"
							:on-success="handleAvatarSuccess">
							<i class="el-icon-plus avatar-uploader-icon"></i>
						  </el-upload>
						</div>
					  </el-col>
					</el-row>
					<p @click="dialogVisible = 'password'" style="cursor: pointer;">修改密码</p>
					<p @click="dialogVisible = 'email'" style="cursor: pointer;">修改邮箱</p>
					<p @click="dialogVisible = 'phone'" style="cursor: pointer;">修改电话</p>
				    <p @click="dialogVisible = 'name'" style="cursor: pointer;">修改昵称</p>
					<el-dialog title="修改密码" :visible.sync="dialogVisible" v-if="dialogVisible === 'password'">
					  <el-input placeholder="请输入原密码" v-model="originalPassword"></el-input>
					  <br />
					  <br />
					  <el-input placeholder="请输入新密码" v-model="password"></el-input>
					  <span slot="footer" class="dialog-footer">
						<el-button @click="dialogVisible = ''">取消</el-button>
						<el-button type="primary" @click="submitChange('password')">确定</el-button>
					  </span>
					</el-dialog>
					<el-dialog title="修改邮箱" :visible.sync="dialogVisible" v-if="dialogVisible === 'email'">
					  <el-input placeholder="请输入新邮箱" v-model="newEmail"></el-input>
					  <br />
					  <br />
					  <el-input placeholder="请输入验证码" v-model="verificationCode"></el-input>
					  <br />
					  <br />
					  <el-button @click="sendVerificationCode">获取验证码</el-button>
					  <span slot="footer" class="dialog-footer">
						<el-button @click="dialogVisible = ''">取消</el-button>
						<el-button type="primary" @click="submitEmailChange">确定</el-button>
					  </span>
					</el-dialog>
					<el-dialog title="修改电话" :visible.sync="dialogVisible" v-if="dialogVisible === 'phone'">
					  <el-input placeholder="请输入新电话" v-model="phone"></el-input>
					  <span slot="footer" class="dialog-footer">
						<el-button @click="dialogVisible = ''">取消</el-button>
						<el-button type="primary" @click="submitChange('phone')">确定</el-button>
					  </span>
					</el-dialog>
					  <el-dialog title="修改昵称" :visible.sync="dialogVisible" v-if="dialogVisible === 'name'">
						  <el-input placeholder="请输入新昵称" v-model="name"></el-input>
						  <span slot="footer" class="dialog-footer">
						<el-button @click="dialogVisible = ''">取消</el-button>
						<el-button type="primary" @click="submitChange('name')">确定</el-button>
					  </span>
					  </el-dialog>
				  </el-card>
				</el-col>
			  </el-row>
	          <el-row :gutter="20" style="margin-top: 20px;">
	            <el-col :span="12">
					<el-card>
					  <div slot="header" class="clearfix">
						<span>订单管理</span>
					  </div>
					  <el-table :data="orders" style="width: 100%;max-height: 210px;overflow-y: auto;">
						<el-table-column prop="orderNumber" label="订单号" width="180"></el-table-column>
						<el-table-column prop="driverName" label="司机名称" width="100"></el-table-column>
					    <el-table-column prop="licensePlate" label="车牌号" width="100"></el-table-column>
						<el-table-column prop="phoneNumber" label="手机号" width="180"></el-table-column>
						<el-table-column prop="vehicleType" label="车辆类型" width="100"></el-table-column>
						<el-table-column prop="color" label="车辆颜色" width="100"></el-table-column>
						<el-table-column prop="status" label="订单状态" width="120"></el-table-column>
					  </el-table>
					</el-card>
	            </el-col>
	            <el-col :span="12">
	              <el-card>
	                <div slot="header" class="clearfix">
	                  <span>行程记录</span>
	                </div>
	                <el-table :data="trips" style="width: 100%;max-height: 210px;overflow-y: auto;">
	                  <el-table-column prop="date" label="日期" width="180"></el-table-column>
	                  <el-table-column prop="time" label="时间" width="100"></el-table-column>
	                  <el-table-column prop="start" label="出发地" width="150"></el-table-column>
	                  <el-table-column prop="end" label="目的地" width="150"></el-table-column>
	                  <el-table-column prop="cost" label="费用" width="100"></el-table-column>
	                </el-table>
	              </el-card>
	            </el-col>
	          </el-row>
	        </el-main>
	      </el-container>
</div>


<script>
	// request拦截器，将用户token放入头中
	axios.interceptors.request.use(
			config => {
				let token = localStorage.getItem("token"); // 确保 token 正确存储在 localStorage 中
				if (token) {
					config.headers['token'] = token;
				}
				return config;
			},
			error => {
				console.log(error);
				return Promise.reject(error);
			}
	);
  // 创建一个vue的实例对象,里面写那些数据和方法(一个是页面加载完后自动执行的方法，一个是其他操作后执行的代码)
  // 创建 Vue 实例
  new Vue({
    el: '#app',
    data() {
      return {
			userId: "",
			userName: "",
		  	name: "",
			avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png', // 默认头像链接
			dialogVisible: '', // 控制哪个对话框显示
			password: '',
			originalPassword: '',
			email: '',
			newEmail: '',
			verificationCode: '',
			sentCode: '',
			phone: '',
			originalPhone: '',
		  	day: '',
		  	isEditing: false,
			trips: [
				{ date: '2024-06-15', time: '08:00', start: '北京西站', end: '北京南站', cost: '30元' },
				{ date: '2024-06-14', time: '14:00', start: '国贸', end: '天安门', cost: '20元' },
				{ date: '2024-06-13', time: '09:30', start: '首都国际机场', end: '王府井', cost: '50元' }
			        ],
			orders: [
			  { orderNumber: '20240617001', driverName: '张师傅', licensePlate: '京A888',phoneNumber: '13873945267', vehicleType: '豪华型', color: '红色', status: '已发货' },
			  { orderNumber: '20240616002', driverName: '王师傅', licensePlate: '京A888',phoneNumber: '13873945267', vehicleType: '豪华型', color: '红色', status: '待发货' },
			  { orderNumber: '20240615003', driverName: '李师傅', licensePlate: '京A888',phoneNumber: '13873945267', vehicleType: '豪华型', color: '红色', status: '已完成' },
			  // 插入更多订单数据
			],
      }
    },
    methods: {
		sendVerificationCode() {
			this.sentCode = Math.floor(100000 + Math.random() * 900000).toString();
			console.log(`发送验证码 ${this.sentCode} 到邮箱 ${this.email}`);
			this.$message.success('验证码已发送到您的邮箱');
			axios.post('/user/users/sendVerificationCode', {
				userId: this.userId,
				email: this.email,
				code: this.sentCode
			}).then(response => {
				if (response.data.data.code === 1) {
					this.$message.success('验证码发送成功');
				} else {
					this.$message.error('验证码发送失败');
				}
			});
		},
		submitEmailChange() {
			if (this.verificationCode !== this.sentCode) {
				this.$message.error('验证码错误');
				return;
			}
			axios.post('/user/users/changeEmail', {
				userId: this.userId,
				newEmail: this.newEmail
			}).then(response => {
				if (response.data.data.code === 1) {
					localStorage.setItem('email',this.newEmail);
					this.email=localStorage.getItem('email');
					this.$message.success('邮箱修改成功');
				} else {
					this.$message.error('邮箱修改失败');
				}
				this.newEmail='';
				this.verificationCode='';
			});
			this.dialogVisible = '';
		},
		exitInfo(){
			localStorage.removeItem('userId');
			localStorage.removeItem('userName');
			window.location.href = "../html/login.html"; // 页面跳转
		},
		beforeAvatarUpload(file) {
		  // 自定义的一些上传前的校验逻辑，例如文件类型和大小
		  const isJPG = file.type === 'image/jpeg';
		  const isPNG = file.type === 'image/png';
		  const isLt2M = file.size / 1024 / 1024 < 2;

		  if (!isJPG && !isPNG) {
			this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
			return false;
		  }
		  if (!isLt2M) {
			this.$message.error('上传头像图片大小不能超过 2MB!');
			return false;
		  }
		  return true;
		},
		handleAvatarSuccess(response, file) {
		  if (response.code === 1) {
/*			  this.avatar = URL.createObjectURL(file.raw);*/
			  this.avatar = response.data;
			  const data={
			  	id: this.userId,
			    pic: this.avatar
			  };
			  axios.put('/user/users/updatePic',data)
			  .then(response=>{
				  if (response.data.code === 1) {
				    localStorage.setItem('pic',this.avatar);
				  	console.log("成功101");
				  }
			  });
/*			  console.log(this.avatar);*/
			this.$message.success('图片上传成功');
		  } else {
			this.errorMessage = response.data.msg;
			this.$message.error(this.errorMessage);
		  }
		},
		submitChange(type) {
			switch (type) {
				case 'password':
					axios.post('/user/users/changePassword', {
						userId: this.userId,
						originalPassword: this.originalPassword,
						newPassword: this.password
					}).then(response => {
						if (response.data.data.code === 1) {
							this.$message.success('密码修改成功');
						} else {
							this.$message.error('原密码错误');
						}
						this.originalPassword='';
						this.password='';
					});
					break;
				case 'phone':
					axios.post('/user/users/changePhone', {
						userId: this.userId,
						phone: this.phone
					}).then(response => {
						if (response.data.data.code === 1) {
							this.$message.success('电话修改成功');
							localStorage.setItem('phoneNumber',this.phone);
							this.originalPhone=localStorage.getItem('phoneNumber');
						} else {
							this.$message.error('电话修改失败');
						}
						this.phone='';
					});
					break;
				case 'name':
					if(this.name==this.userName){
						this.$message.error('不能与原用户名同名哦');
						return;
					}
					axios.post('/user/users/changeName', {
						userId: this.userId,
						userName: this.name
					}).then(response => {
						if (response.data.data.code === 1) {
							this.$message.success('昵称修改成功');
							localStorage.setItem('userName', this.name);
							this.userName = localStorage.getItem('userName');
						} else {
							this.$message.error('昵称修改失败');
						}
						this.name='';
					});
					break;
			}
			this.dialogVisible = '';
		},
    },
    mounted(){
		this.userId = localStorage.getItem('userId');
		this.userName = localStorage.getItem('userName');
		this.email=localStorage.getItem('email');
		this.originalPhone=localStorage.getItem('phoneNumber');
		this.avatar = localStorage.getItem('pic');
		this.day=localStorage.getItem('day');
		axios.get('/order/orders/getByUserId?userId='+this.userId)
		.then(response=>{
			if(response.data.code==1){
				this.orders = response.data.data.map(order => {
					// 将status转换为相应的文本描述
					switch (order.status) {
						case '1':
							order.status = '待处理';
							break;
						case '2':
							order.status = '已确认';
							break;
						case '3':
							order.status = '已完成';
							break;
						case '4':
							order.status = '已取消';
							break;
						default:
							order.status = '待付款'; // 添加默认情况处理
					}

					// 将driverName修改为取其第一个字再加师傅
					if (order.driverName) {
						order.driverName = order.driverName.charAt(0) + '师傅';
					}

					return order;
				});
			}
		});
		axios.get('/order/orders/getByUserId2?userId='+this.userId)
		.then(response=>{
			if(response.data.code==1){
				this.trips = response.data.data.map(order => {
					const [date, time] = order.orderDate.split(' ');
					const cost = (order.actualAmount==null) ? '未接单' : order.actualAmount + '元';
					return {
						date: date,
						time: time,
						start: order.departureLocation,
						end: order.destinationLocation,
						cost: cost
					};
				});
			}
		});
		// if (this.userName === null) {
		// 	this.$message.error('非法进入,请先登录');
		// 	setTimeout(() => {
		// 		window.location.href = "../html/login.html";
		// 	}, 3000); // 延迟2秒（2000毫秒）执行
		// } 
    },
	computed: {
		displayUsername: {
			get() {
				return this.userName ? this.userName : "未登录";
			},
			set(value) {
				this.userName = value;
			}
		}
	},
  });
</script>
<!-- 不用vue的js代码写在下面-->
<script>
</script>
</body>
</html>